<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码 - 在线评测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f0f2f5;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* background: linear-gradient(125deg, #63a8e0, #4043e9, #21a2f2); */
            background-color: #fff;
            background-size: 400% 400%;
            animation: gradientBg 15s ease infinite;
            z-index: -2;
        }
        
        @keyframes gradientBg {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            display: block;
            background-color: rgba(255, 255, 255, 0.8);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            animation: fall linear infinite;
        }
        
        @keyframes fall {
            0% {
                opacity: 0;
                transform: translateY(-300px);
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: 0.8;
            }
            100% {
                opacity: 0;
                transform: translateY(calc(100vh + 300px)) rotate(360deg);
            }
        }
        
        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 200px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255, 255, 255, 0.08)" d="M0,288L60,272C120,256,240,224,360,218.7C480,213,600,235,720,224C840,213,960,171,1080,149.3C1200,128,1320,128,1380,128L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: -1;
            animation: wave 20s linear infinite;
        }
        
        @keyframes wave {
            0% {
                background-position-x: 0%;
            }
            100% {
                background-position-x: 100%;
            }
        }
        
        .header {
            position: absolute;
            top: 30px;
            left: 50px;
            z-index: 10;
            display: flex;
            align-items: center;
        }
        
        .logo-image {
            height: 40px;
            margin-right: 10px;
        }
        .recovery-container {
            width: 100%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            padding: 40px;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .recovery-container::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #21a2f2, #577a90);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .recovery-header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        .recovery-header h1 {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .recovery-header p {
            font-size: 16px;
            color: #666;
            margin-bottom: 10px;
        }

        .steps-container {
            display: flex;
            justify-content: space-between;
            margin: 50px 60px 70px;
            position: relative;
        }

        .steps-container::before {
            content: '';
            position: absolute;
            top: 25px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e0e0e0;
            z-index: 1;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .step-number {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
            color: #888;
            font-weight: bold;
            font-size: 20px;
            position: relative;
            transition: all 0.5s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .step::after {
            display: none;
        }
        
        .step:last-child::after {
            display: none;
        }

        .step.active .step-number {
            background: #21a2f2;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(227, 144, 144, 0.4);
        }
        
        .step.active::after {
            background-color: #21a2f2;
        }
        
        .step.completed .step-number {
            background: #52c41a;
            color: white;
        }
        
        .step.completed::after {
            background-color: #52c41a;
        }
        
        .step.completed .step-number::after {
            content: '\f00c';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
        }

        .step-label {
            font-size: 16px;
            color: #888;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .step.active .step-label {
            color: #21a2f2;
            font-weight: 600;
        }
        
        .step.completed .step-label {
            color: #52c41a;
        }
        
        .step:hover .step-label {
            transform: translateY(-3px);
        }
        #passwordRecoveryForm{
            width: 70%;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 30px;
            display: flex;
            align-items: flex-start;
            position: relative;
        }

        .form-group label {
            width: 100px;
            padding-top: 12px;
            text-align: right;
            padding-right: 20px;
            color: #666;
            font-size: 15px;
            font-weight: 400;
        }

        .form-group .input-container {
            flex: 1;
            position: relative;
            width: 100%;
        }
        
        .form-group .input-container i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #21a2f2;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .form-group .error-message {
            display: flex;
            align-items: center;
            color: #ff4d4f;
            font-size: 14px;
            opacity: 0;
            transition: all 0.3s ease;
            position: absolute;
            left: 100px; /* 与label宽度一致 */
            top: 100%;
            margin-top: 5px;
        }
        
        .form-group .error-message.show {
            opacity: 1;
        }

        .form-group .error-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #fff2f0;
            color: #ff4d4f;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 6px;
            font-size: 10px;
        }
        .fa-exclamation{
            left: auto !important;
        }
        #accountError,#phoneNumberError,#codeError{
            left: 0;
        }
        .form-group input {
            width: 100%;
            max-width: 360px;
            height: 42px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 8px 12px 8px 35px;
            font-size: 15px;
            transition: all 0.3s ease;
            background-color: #fff;
        }

        .form-group input:focus {
            outline: none;
            border-color: #21a2f2;
            box-shadow: 0 0 0 2px rgba(227, 144, 144, 0.2);
        }
        
        .form-group input:focus + i {
            color: #21a2f2;
        }

        .form-group .verification-container {
            display: flex;
            gap: 15px;
            width: 100%;
            max-width: 370px;
            align-items: center;
        }

        .form-group .verification-container input {
            flex: 1;
            width: auto !important;
        }

        .btn {
            height: 40px;
            padding: 0 20px;
            border-radius: 4px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
            position: relative;
        }

        .btn-primary {
            background-color: #21a2f2;
            color: #fff;
            box-shadow: 0 2px 8px rgba(227, 144, 144, 0.3);
        }

        .btn-primary:hover {
            background-color: #c75252;
            box-shadow: 0 4px 12px rgba(227, 144, 144, 0.4);
        }
        
        .btn-primary:active {
            transform: translateY(1px);
            box-shadow: 0 2px 6px rgba(227, 144, 144, 0.3);
        }

        .form-actions {
            text-align: center;
            margin-top: 40px;
        }

        .form-actions .btn {
            width: 140px;
            height: 42px;
            font-size: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .footer {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="background-image"></div>
    <div class="particles" id="particles"></div>
    <div class="wave"></div>
    
    <div class="recovery-container">
        <div class="recovery-header">
            <h1>找回密码</h1>
            <p>为了保证您的账户安全，请完成验证</p>
        </div>
        
        <div class="steps-container">
            <div class="step active">
                <div class="step-number">1</div>
                <div class="step-label">身份验证</div>
            </div>
            <div class="step">
                <div class="step-number">2</div>
                <div class="step-label">登录密码重置</div>
            </div>
            <div class="step">
                <div class="step-number">3</div>
                <div class="step-label">重置完成</div>
            </div>
        </div>
        
        <form id="passwordRecoveryForm">
            <div class="form-group">
                <label for="phoneNumber">手机号：</label>
                <div class="input-container">
                    <input type="text" id="phoneNumber" placeholder="请输入手机号">
                    <i class="fas fa-mobile-alt"></i>
                    <div class="error-message" id="phoneNumberError">
                        <div class="error-icon"><i class="fas fa-exclamation"></i></div>
                        无效手机号
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="systemAccount">系统账号：</label>
                <div class="input-container">
                    <input type="text" id="systemAccount" placeholder="请输入系统账号">
                    <i class="fas fa-user"></i>
                    <div class="error-message" id="accountError">
                        <div class="error-icon"><i class="fas fa-exclamation"></i></div>
                        无效账号
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="verificationCode">验证码：</label>
                <div class="input-container verification-container">
                    <input type="text" id="verificationCode" placeholder="请输入验证码">
                    <i class="fas fa-shield-alt"></i>
                    <button type="button" class="btn btn-primary" id="getCodeBtn">获取验证码</button>
                    <div class="error-message" id="codeError">
                        <div class="error-icon"><i class="fas fa-exclamation"></i></div>
                        请输入验证码
                    </div>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-primary" id="nextStepBtn">
                    <span>下一步</span>
                    <i class="fas fa-arrow-right" style="margin-left: 8px;"></i>
                </button>
            </div>
        </form>
    </div>
    
    <div class="footer">
        <p>Copyright © 版权所有 2025年</p>
    </div>

    <script>
        // 创建粒子动画
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particlesCount = 50;
            
            for (let i = 0; i < particlesCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // 随机位置
                const posX = Math.random() * window.innerWidth;
                const posY = Math.random() * window.innerHeight;
                
                // 随机大小
                const size = Math.random() * 6 + 2;
                
                // 随机动画时间
                const animationDuration = Math.random() * 15 + 10;
                
                particle.style.left = `${posX}px`;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.animationDuration = `${animationDuration}s`;
                
                // 随机延迟
                particle.style.animationDelay = `${Math.random() * 5}s`;
                
                particlesContainer.appendChild(particle);
            }
        }
        
        // 返回登录页函数
        function backToLogin() {
            window.location.href = '../login.html';
        }
        
        // 页面加载完成后初始化粒子
        document.addEventListener('DOMContentLoaded', createParticles);
        
        // 获取验证码按钮倒计时功能
        document.getElementById('getCodeBtn').addEventListener('click', function() {
            const btn = this;
            let countdown = 60;
            
            // 检查手机号格式
            const phoneNumber = document.getElementById('phoneNumber').value;
            const phoneNumberError = document.getElementById('phoneNumberError');
            
            if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
                phoneNumberError.classList.add('show');
                return;
            } else {
                phoneNumberError.classList.remove('show');
            }
            
            // 发送验证码请求（这里只是模拟）
            btn.disabled = true;
            
            // 添加按钮loading效果
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            
            setTimeout(() => {
                btn.innerHTML = `${countdown}秒后重新获取`;
                
                const timer = setInterval(() => {
                    countdown--;
                    btn.textContent = `${countdown}秒后重新获取`;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        btn.disabled = false;
                        btn.textContent = '获取验证码';
                    }
                }, 1000);
            }, 1500); // 模拟请求延迟
            
            // 这里可以添加发送验证码的接口调用
        });
        
        // 表单验证和提交
        document.getElementById('nextStepBtn').addEventListener('click', function() {
            const phoneNumber = document.getElementById('phoneNumber').value;
            const systemAccount = document.getElementById('systemAccount').value;
            const verificationCode = document.getElementById('verificationCode').value;
            const phoneNumberError = document.getElementById('phoneNumberError');
            const accountError = document.getElementById('accountError');
            const codeError = document.getElementById('codeError');
            
            // 简单验证
            let isValid = true;
            
            if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
                phoneNumberError.classList.add('show');
                isValid = false;
            } else {
                phoneNumberError.classList.remove('show');
            }
            
            if (!systemAccount) {
                accountError.classList.add('show');
                isValid = false;
            } else {
                accountError.classList.remove('show');
            }
            
            if (!verificationCode) {
                codeError.classList.add('show');
                isValid = false;
            } else {
                codeError.classList.remove('show');
            }
            
            if (isValid) {
                // 添加按钮loading效果
                const btn = this;
                const originalText = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 验证中...';
                btn.disabled = true;
                
                // 模拟验证过程
                setTimeout(() => {
                    // 模拟验证成功，跳转到下一步
                    window.location.href = 'reset-password.html';
                }, 1500);
            }
        });
        
        // 隐藏所有错误提示
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('focus', function() {
                // 只隐藏当前输入框关联的错误信息
                const formGroup = this.closest('.form-group');
                if (formGroup) {
                    const errorMessage = formGroup.querySelector('.error-message');
                    if (errorMessage) {
                        errorMessage.classList.remove('show');
                    }
                }
            });
        });
        
        // 页面加载完成后设置表单验证
        document.addEventListener('DOMContentLoaded', function() {
            // 添加返回登录按钮
            const backLink = document.createElement('a');
            backLink.href = 'javascript:void(0)';
            backLink.textContent = '返回登录';
            backLink.style.position = 'absolute';
            backLink.style.top = '40px';
            backLink.style.right = '40px';
            backLink.style.color = '#21a2f2';
            backLink.style.textDecoration = 'none';
            backLink.style.fontSize = '14px';
            backLink.addEventListener('click', backToLogin);
            document.querySelector('.recovery-container').appendChild(backLink);
        });
    </script>
</body>
</html> 